<!-- 职位档案操作历史 -->
<template>
  <div class="container">
    <a-space style="margin-bottom: 20px">
      <span>历史职位节点记录查询：</span>
      <a-range-picker showTime @ok="ok" v-model="timeSelect" />
      <a-button type="primary" @click="onSearch">查询</a-button>
    </a-space>
    <a-scrollbar id="timeline" style="height: 400px; overflow: auto">
      <a-timeline reverse>
        <a-timeline-item label="2017-03-10"
          >The first milestone</a-timeline-item
        >
        <a-timeline-item label="2018-05-12"
          >The second milestone</a-timeline-item
        >
        <a-timeline-item label="2020-09-30"
          >The third milestone</a-timeline-item
        >
        <a-timeline-item label="2017-03-10"
          >The first milestone</a-timeline-item
        >
        <a-timeline-item label="2018-05-12"
          >The second milestone</a-timeline-item
        >
        <a-timeline-item label="2020-09-30"
          >The third milestone</a-timeline-item
        >
        <a-timeline-item label="2017-03-10"
          >The first milestone</a-timeline-item
        >
        <a-timeline-item label="2018-05-12"
          >The second milestone</a-timeline-item
        >
        <a-timeline-item label="2020-09-30"
          >The third milestone</a-timeline-item
        >
        <a-timeline-item label="2017-03-10"
          >The first milestone</a-timeline-item
        >
        <a-timeline-item label="2018-05-12"
          >The second milestone</a-timeline-item
        >
        <a-timeline-item label="2020-09-30"
          >The third milestone</a-timeline-item
        >
        <a-timeline-item label="2017-03-10"
          >The first milestone</a-timeline-item
        >
        <a-timeline-item label="2018-05-12"
          >The second milestone</a-timeline-item
        >
        <a-timeline-item label="2020-09-30"
          >The third milestone</a-timeline-item
        >
        <a-timeline-item label="2017-03-10"
          >The first milestone</a-timeline-item
        >
        <a-timeline-item label="2018-05-12"
          >The second milestone</a-timeline-item
        >
        <a-timeline-item label="2020-09-30"
          >The third milestone</a-timeline-item
        >
        <a-timeline-item label="2017-03-10"
          >The first milestone</a-timeline-item
        >
        <a-timeline-item label="2018-05-12"
          >The second milestone</a-timeline-item
        >
        <a-timeline-item label="2020-09-30"
          >The third milestone</a-timeline-item
        >
        <a-timeline-item label="2017-03-10"
          >The first milestone</a-timeline-item
        >
        <a-timeline-item label="2018-05-12"
          >The second milestone</a-timeline-item
        >
        <a-timeline-item label="2020-09-30"
          >The third milestone</a-timeline-item
        >
        <a-timeline-item label="2017-03-10"
          >The first milestone</a-timeline-item
        >
        <a-timeline-item label="2018-05-12"
          >The second milestone</a-timeline-item
        >
        <a-timeline-item label="2020-09-30"
          >The third milestone</a-timeline-item
        >
        <a-timeline-item label="2017-03-10"
          >The first milestone</a-timeline-item
        >
        <a-timeline-item label="2018-05-12"
          >The second milestone</a-timeline-item
        >
        <a-timeline-item label="2020-09-30"
          >The third milestone</a-timeline-item
        >
        <a-timeline-item label="2017-03-10"
          >The first milestone</a-timeline-item
        >
        <a-timeline-item label="2018-05-12"
          >The second milestone</a-timeline-item
        >
        <a-timeline-item label="2020-09-30"
          >The third milestone</a-timeline-item
        >
        <a-timeline-item label="2017-03-10"
          >The first milestone</a-timeline-item
        >
        <a-timeline-item label="2018-05-12"
          >The second milestone</a-timeline-item
        >
        <a-timeline-item label="2020-09-30"
          >The third milestone</a-timeline-item
        >
        <a-timeline-item label="2017-03-10"
          >The first milestone</a-timeline-item
        >
        <a-timeline-item label="2018-05-12"
          >The second milestone</a-timeline-item
        >
        <a-timeline-item label="2020-09-30"
          >The third milestone</a-timeline-item
        >
        <a-timeline-item label="2017-03-10"
          >The first milestone</a-timeline-item
        >
        <a-timeline-item label="2018-05-12"
          >The second milestone</a-timeline-item
        >
        <a-timeline-item label="2020-09-30"
          >The third milestone</a-timeline-item
        >
        <a-timeline-item label="2017-03-10"
          >The first milestone</a-timeline-item
        >
        <a-timeline-item label="2018-05-12"
          >The second milestone</a-timeline-item
        >
        <a-timeline-item label="2020-09-30"
          >The third milestone</a-timeline-item
        >
        <a-timeline-item label="2017-03-10"
          >The first milestone</a-timeline-item
        >
        <a-timeline-item label="2018-05-12"
          >The second milestone</a-timeline-item
        >
        <a-timeline-item label="2020-09-30"
          >The third milestone</a-timeline-item
        >
      </a-timeline>
    </a-scrollbar>
    <a-back-top
      target-container="#timeline"
      :style="{ position: 'absolute' }"
    />
  </div>
</template>

<script lang="ts" setup>
let timeSelect = ref();
const route = useRoute();
let id = Number(route.query.id);
onBeforeRouteUpdate((to) => {
  id = Number(to.query.id);
  getData();
});

const ok = (value, date, dateString) => {
  console.log(value, date, dateString);
  timeSelect.value = dateString;
};

const getData = async () => {
  try {
    //
  } catch (error: unknown) {
    console.log(error);
  }
};
// 点击搜索按钮
const onSearch = () => {
  getData();
};

// 监听键盘回车，按了回车也会查询
const keyDown = (e: any) => {
  if (e.keyCode === 13) {
    getData();
  }
};

onMounted(() => {
  // 监听键盘事件
  window.addEventListener('keydown', keyDown);
});
</script>

<style scoped lang="less"></style>
